<template>
	<view>
		<view class="fixed flex justify-center bg-fff padding-sm">
				<view v-for="(item,index) in tabArr" :key="index" @click="handleTab(item)" class="flex justify-center align-center pad">
					<view class="">{{item.name}}</view>
					<u-line v-if="index<tabArr.length-1" direction="col" length="15" margin="20upx"></u-line>
				</view>
				<!-- {{num}} -->
			</view>
			<!-- //弹窗 -->
			<u-popup :show="show" mode="left"  @close="handleClose">
			        <view class="pop-cont">
						<!-- u-border-bottom 下划线 -->
			            <view v-for="(item,index) in cfylist" :key="index">
							<view @click="handleList(item,0)" class="padding-sm u-border-bottom">
								{{item.bname}}
								<view class="cu-tag round bg-yellow color-fff margin">
									{{item.num}}
								</view>
							</view>
							<view v-if="index==0" class="">
								<view class="padding-tb-sm margin-top u-border-top" @click="listShow=!listShow">
									口味筛选
								</view>
								<u-cell-group v-if="listShow">
									<u-cell @click="handleList(itm,1)" v-for="(itm,idx) in item.list" :key="idx" :isLink="true" :title="itm.tname"></u-cell>
								</u-cell-group>
								<view class="padding-tb-sm" @click="sceneShow=!sceneShow">
									场景筛选
								</view>
								<u-cell-group v-if="sceneShow">
									<u-cell @click="handleList(itm,2)" v-for="(itm,idx) in item.scene" :key="idx" :isLink="true" :title="itm.tname"></u-cell>
								</u-cell-group>
							</view>
						</view>
			        </view>
			</u-popup>
	</view>
</template>

<script>
	export default {
		name:"tab-custom",
		data() {
			return {
				tabArr:[
					{name:'分类',bcid:'',target:''},
					{name:'蛋糕',bcid:'1',target:'/pages/cake/cake'},
					{name:'面包',bcid:'11',target:'/pages/bread/bread'},
					{name:'小食',bcid:'6',target:'/pages/food/food'},
					{name:'购物车',bcid:'',target:'/pages/shapcat/shapcat'},
				],
				show: false,
				cfylist:[],
				listShow:false,
				sceneShow:false
			};
		},
		created() {
			this.$get('/1.1/classes/classify').then(res=>{
				// console.log(res);
				this.cfylist = res.results
			})
		},
		methods:{
			handleTab(item){
				// 解构出当前点击的属性
				let {bcid,target} = item
				if(bcid){
					// 点击切换置空刷新
					// this.glist = []
					// this.page = 0
					// 获取点击的当前bcid ;转换为数值型
					// this.condition.bcid = Number(bcid)
					//触发变更数据
					this.$store.commit('changeCondition',{
						bcid:Number(bcid)
					})
					// 
					uni.navigateTo({
						url:target
					})
				}
				// 如果没有bcid且没有target
				if(!bcid&&!target){
					this.show = true
				}
				if(!bcid&&target){
					uni.navigateTo({
						url:target
					})
				}
			},
			handleClose(){
				this.show = false
			},
			// 口味筛选
			handleList({bid,tid},type){
				// console.log(listObj);
				let obj = {bcid:bid}
				// type==1 ? obj.fid=tid : obj.sid=tid
				if(type===1){obj.fid=tid}
				if(type===2){obj.sid=tid}
				this.$store.commit('changeCondition',obj)
				this.show = false
				//重新获取数据
				uni.navigateTo({
					url:'/pages/cake/cake'
				})
			}
		}
	}
</script>

<style lang="scss">
.fixed{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
	.pad{
		margin: 0 10upx 0 10upx;
	}
}
.pop-cont{
	width: 400upx;
	margin-top: 150upx;
}
</style>